<template>
    <div class="container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="线索分析" name="first">
                <!-- 头部搜索栏 -->
                <el-form :inline="true" :model="data" class="demo-form-inline">
                    <el-form-item label="渠道来源">
                        <el-select v-model="data.type" placeholder="抖音短视频" clearable>
                            <el-option v-for="item in roles" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="线索状态">
                        <el-select v-model="data.type" placeholder="课程类型" clearable>
                            <el-option v-for="item in roles1" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker v-model="value2" type="datetimerange" start-placeholder="Start date"
                            end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                            time-format="A hh:mm:ss" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="Query">搜索</el-button>
                        <el-button type="info" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 线索分析 -->
                <div class="Echarts">
                    <EchartsXianSuo></EchartsXianSuo>
                </div>
                <!-- 表格 -->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="时间" width="200" />
                    <el-table-column prop="bulking" label="线索增量" width="200" />
                    <el-table-column prop="stock" label="线索存量" width="700" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="商机分析" name="second">
                <EchartsShangJi></EchartsShangJi>
            </el-tab-pane>
            <el-tab-pane label="活动分析" name="third">
                <div class="Echarts1" style="width: 100%">
                  <EchartsHuoDong></EchartsHuoDong>  
                </div>
            </el-tab-pane>
            <el-tab-pane label="渠道分析" name="fourth">
                <EchartsQudao></EchartsQudao>
            </el-tab-pane>
        </el-tabs>
        <!-- 按钮七五  -->
        <!-- <div class="button">
            <el-button type="primary" plain @click="opendialogVisible"><el-icon>
                    <Plus />
                </el-icon>新增</el-button>
            <el-button type="success" plain><el-icon>
                    <Edit />
                </el-icon>修改</el-button>
            <el-button type="danger" plain @click="deleteSelectedCourses"><el-icon>
                    <Delete />
                </el-icon>删除</el-button>
            <el-button type="warning" plain><el-icon>
                    <Download />
                </el-icon>导出</el-button>
        </div> -->
        <!-- 表格 -->
        <!-- <div>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column fixed prop="courseId" label="课程编号" width="55" />
                <el-table-column prop="type" label="课程类型" width="120">
                    <template #default="scope">
                        <el-tag v-if="scope.row.type == 1">舞蹈类</el-tag>
                        <el-tag v-if="scope.row.type == 2" type="success">游泳类</el-tag>
                        <el-tag v-if="scope.row.type == 3" type="info">其他类</el-tag>
                    </template>
</el-table-column>
<el-table-column prop="name" label="课程名称" width="120" />
<el-table-column prop="price" label="课程价格" width="120" />
<el-table-column prop="applyTo" label="课程适用人群" width="120">
    <template #default="scope">
                        <el-tag v-if="scope.row.type == 1" type="success">上班族</el-tag>
                        <el-tag v-if="scope.row.type == 2">中小学生</el-tag>
                        <el-tag v-if="scope.row.type == 3" type="info">其他牛马</el-tag>
                    </template>
</el-table-column>
<el-table-column prop="remark" label="课程简介" width="120" />
<el-table-column prop="createTime" label="创建时间" width="120" />
<el-table-column fixed="right" label="操作" min-width="120">
    <template #default="scope">
                        <el-button link type="primary" size="small" @click="opendialogVisible(scope.row)">
                            <el-icon>
                                <Edit />
                            </el-icon> 修改

                        </el-button>
                        <el-button link type="primary" size="small" @click="open(scope.row)">
                            <el-icon>
                                <Delete />
                            </el-icon> 删除

                        </el-button>
                    </template>
</el-table-column>
</el-table>
</div> -->

        <!-- 模态框 -->
        <el-dialog :title="courseld ? '编辑课程' : '添加课程'" v-model="dialogVisible" width="70%">
            <el-form label-width="100px">
                <el-form-item label="课程分类" v-model="data.type">
                    <el-select v-model="data.type" placeholder="课程分类">
                        <el-option label="舞蹈类" value="1" />
                        <el-option label="游泳类" value="2" />
                        <el-option label="其他类" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名称">
                    <el-input v-model="data.name"></el-input>
                </el-form-item>
                <el-form-item label="适用人群">
                    <el-select v-model="data.applyTo" placeholder="适用人群">
                        <el-option label="上班族" value="1" />
                        <el-option label="中小学生" value="2" />
                        <el-option label="其他牛马" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="课程价格">
                    <el-input-number v-model="data.price"></el-input-number>
                </el-form-item>
                <el-form-item label="课程简介">
                    <el-input v-model="data.remark" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="courseld" type="primary" @click="editForm">编 辑</el-button>
                <el-button v-else type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, } from 'vue';
import { ElMessage, ElMessageBox, TabsPaneContext } from 'element-plus';
// import {postLogin,
// } from "../../../api/index";
import { tienchin, tienchinSouSuo, tienchinDelete, tienchinAdd, tienchinEdit,statistic } from '../../../api/login';
import { get } from 'http';
import EchartsXianSuo from './EchartsXianSuo.vue';
import EchartsHuoDong from './EchartsHuoDong.vue';
import EchartsShangJi from './EchartsShangJi.vue';
import EchartsQudao from './EchartsQudao.vue';


// tab切换
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
// 日期的
const value2 = ref('')
// 列表
const tableData = ref([]);

const roles = ref([
    { label: "舞蹈类", value: 1 },
    { label: "游泳类", value: 2 },
    { label: "其他类", value: 3 },
]);
const roles1 = ref([
    { label: "上班族", value: 1 },
    { label: "中小学生", value: 2 },
    { label: "其他牛马", value: 3 },
]);
const courseld = ref(null)
const data = ref({
    applyTo: '',//
    maxPrice: 0,
    minPrice: 0,
    name: '',//
    type: '',//
    courseld: 0,//
    info: '',//
    price: 0,//
    remark: '',//
});
const formInline = tableData.value

// 删除的
const selectedCourses = ref<number[]>([]);
const handleSelectionChange = (selection: any[]) => {
    selectedCourses.value = selection.map(item => item.courseId);
};
const deleteSelectedCourses = () => {
    if (selectedCourses.value.length === 0) {
        ElMessage.warning('请选择要删除的课程');
        return;
    }

    ElMessageBox.confirm(
        `是否确认删除选中的 ${selectedCourses.value.length} 个课程?`,
        '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            tienchinDelete(selectedCourses.value).then((res: any) => {
                if (res.code !== 200) return ElMessage.error('删除失败');
                ElMessage.success('删除成功');
                getTeamList();
            });
        })
        .catch(() => {
            ElMessage.info('取消删除');
        });
};

// 新增/编辑

const dialogVisible = ref(false);
function opendialogVisible(row: any) {
    if (row) {
        data.value = { ...row }; // 将当前行的数据赋值给 data
        courseld.value = row.courseId;
    } else {
        data.value = {
            applyTo: '',
            maxPrice: 0,
            minPrice: 0,
            name: '',
            type: '',
            courseld: 0,
            info: '',
            price: 0,
            remark: '',
        };
        courseld.value = null;
    }
    dialogVisible.value = true;
}

const submitForm = () => {
    // 处理表单提交逻辑
    tienchinAdd(data.value).then((res: any) => {
        if (res.code = 200) {
            ElMessage.success("新增成功");
            getTeamList()
        } else {
            ElMessage.error("新增失败");
        }
    })
    // console.log(data.value);
    dialogVisible.value = false;

    return {
        dialogVisible,
        data,
        tienchinAdd
    };
};
const editForm = (courseld: any) => {
    tienchinEdit(data.value).then((res: any) => {
        if (res.code = 200) {
            ElMessage.success("编辑成功");
            getTeamList()
        } else {
            ElMessage.error("编辑失败");
        }
    })
    // console.log(data.value);
    dialogVisible.value = false;

    return {
        dialogVisible,
        data,
        tienchinAdd
    };
};
// 搜索
const Query = () => {
    tienchinSouSuo(data.value).then((res: any) => {
        if (res.code !== 200) return ElMessage.error("查询团队失败");
        if (res.code = 200) {
            tableData.value = res.rows;
            // getTeamList()
        }
    });
};

// 重置
const reset = () => {
    data.value = {
        applyTo: '',//
        maxPrice: 0,
        minPrice: 0,
        name: '',//
        type: '',//
        courseld: 0,//
        info: '',//
        price: 0,//
        remark: '',//
    };
};
// 删除
const deleteCourse = (courseId: any) => {
    tienchinDelete(courseId).then((res: any) => {
        if (res.code !== 200) return ElMessage.error('删除失败');
        // ElMessage.success('删除成功');
        getTeamList();
    });
}
const open = (row: any) => {
    ElMessageBox.confirm(
        `是否确认删除课程编号为'${row.courseId}'的数据项?`,
        '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteCourse(row.courseId)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


const getTeamList = () => {
    statistic().then((res: any) => {
        if (res.code !== 200) return ElMessage.error("查询线索失败");
        if (res.code = 200) {
            // tableData.value = res.rows;
            console.log(res)
            // total.value = res.total;
        }
    });
};
onMounted(() => {
    getTeamList();
});

</script>

<style lang="scss" scoped>
.container {
    padding: 20px;

    .button {
        margin: 0 0 20px 0;
    }
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

// 日期的
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
}

.line {
    width: 1px;
    background-color: var(--el-border-color);
}
</style>